@charset "utf-8";
@font-face { font-family: "MyriadPro"; font-style: normal; src:  url("fonts/MyriadPro-Regular.otf") format("opentype"); /* non-IE */}
@font-face { font-family: "MyriadPro"; font-style: italic; src: url("fonts/MyriadPro-It.otf") format("opentype"); /* non-IE */ }
/*Main Layout*/
* { font-family:Arial, Helvetica, sans-serif; font:Arial, Helvetica, sans-serif; font-size: 14px;}
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
a { text-decoration: none; color: #000; }
* a img{ text-decoration: none; border: 0px; color: #000; }
label.error { color: red; }
label.suc { color: green; }
table td input {padding: 3px; background-color: white;}
body { margin: 0px; padding: 0px; outline: 0px; background:url(../images/layout/main_background.png) no-repeat center top;}
.wrapper {width: 900px;  margin:0 auto; position: relative; min-height:  650px}
.header { background: url(../images/layout/header_backgrounf.png) left top no-repeat; height: 222px; position: relative;}
.main_body{overflow: hidden; position: relative;}
.top_line {position: absolute; width: 100%; height: 21px; background: url(../images/layout/top_line.png) }

/*Main Menu*/
.main_menu {float: left; clear:both; margin: 20px 0px 40px 20px; width: 100%; position: relative;}
.main_menu ul li {display: inline; background:url(../images/layout/unselected_main_menu_icon.png) no-repeat; margin-right: 70px; float:left;  text-indent: 25px;}
.main_menu ul li a {text-decoration: none; color: white; }
.main_menu ul li a:hover{text-decoration: underline;}
.main_menu ul li.selected_item{background:url(../images/layout/selected_main_menu_icon.png) no-repeat; color: white; }

/*Banner*/
.banner {width: 100%; position: relative; float: left; clear:both;}

/*Floating Banner*/
#floatdiv1 {position:absolute; width:151px;height:459px;top:10px; padding:16px; z-index:100;}
#floatdiv2 {position:absolute; width:151px;height:459px;top:10px; padding:16px; z-index:100;}
.floating_text {background-color: #e0001b; color: white; position: absolute; top: 250px; font-size: 22px; right:  16px; width: 151px; font-weight: bold;}

/*User Block*/
.user_block{position:absolute; right: 60px; bottom: 40px; text-align: right; color: white; line-height: 20px; }
.user_block span{color:#F90;}
.user_block .act { border: 1px solid #fff; }
.user_block div + div { margin-right: 20px; }
.user_block div, .user_block div:hover { margin-top: 5px; cursor: pointer; }
.user_block div.vn { background: url(../images/layout/lang-vn.png); width: 19px; height: 13px; float: right; }
.user_block div.en { background: url(../images/layout/lang-en.png); width: 20px; height: 14px; float: right; }
.user_block a {color: white;}
.user_block a:hover {text-decoration:underline;}

/*Left Menu*/
.left_menu {float: left; width: 200px; overflow:hidden; margin: 10px 0px 0px 10px; background:url(../images/layout/category_background.png) no-repeat; min-height: 600px; z-index: 1}
.left_menu_header {width: 100%; font-weight: bold; height: 40px; background:url(../images/layout/category_header.png) no-repeat; text-align: center;color: black; line-height: 35px; z-index: 2}
.left_menu_content ul {list-style-type: none; margin-left: -25px;}
.left_menu_content ul li {background:url(../images/layout/unselected_list_style.png) 0px 2px no-repeat; text-indent: 20px; margin: 20px 0px 20px 0px; cursor: pointer; }
.left_menu_content ul li a:hover{text-decoration: underline;}
.left_menu_content ul li.selected_node {background:url(../images/layout/selected_list_style.png) 0px 2px no-repeat; }

/*Slider*/
.slider { margin: 10px 0px 15px 10px; position: relative; }
.slider_buttons {position: absolute; right: 20px; bottom: 20px;}

/*Main Content*/
.main_content { float: left; width: 665px; margin: 10px 0px 0px 15px; background:url(../images/layout/best_seller_background.png) no-repeat; z-index: 1; min-height: 380px; }
.main_content_header {float: left; position: relative; width: 100%; font-weight: bold; height: 40px; background:url(../images/layout/best_seller_header.png) no-repeat; text-align: center;color: black; line-height: 35px; z-index: 2;}

/*Product Box*/
.product_box{ width: 206px; height: 296px; margin: 10px 0px 0px 10px; background:url(../images/layout/product_box_background.png) no-repeat; float: left}
.product_box img{margin: 13px 0px 0px 13px;}
.text_box{margin: 20px 0px 0px 10px;}
.text_box table {width: 185px;}
.price_home {font-size: 12px;}

/*Product Box Home*/
.product_box_home { width: 206px; height: 258px; margin: 10px 0px 0px 10px; background:url(../images/layout/box_background_home.png) no-repeat; float: left}
.product_box_home img {margin: 13px 0px 0px 13px;}

/*Image Box*/
.image_box {width: 209px; height: 214px; position: relative; float:left; margin: 10px 0px 0px 10px;}
.image_wrapper{width: 199px; height: 204px; background:url(../images/layout/level2_background.png) no-repeat; position: absolute;}
.image_wrapper img {margin: 10px 0px 0px 5px;}
.background {position: absolute; top: 10px; left: 10px;}
.background img{opacity:0.4; filter:alpha(opacity=40);}

/*Product Detail*/
.detail {width: 200px; height: 200px; background:url(../images/layout/product_detail_background.png) no-repeat center center;}
.detail img {margin: 10px 0px 0px 10px;}
.detail_hr {color: black; background: black; height: 3px; border: 0px;}
.detail_text {float: left; position: relative; width: 400px; margin: 10px 0px 0px 30px;}
.description {display:block; clear:both; font-size: 14px;}
.name {font-size: 15px; font-weight: bold}
.price {font-size: 30px; font-weight: bold}
.images_header {background:url(../images/layout/images_header.png) no-repeat; height: 15px; width: 657px; position:relative; clear: both; font-weight: bold; font-size: 14px; text-indent: 10px; top: 10px;}
.small_box {width: 151px; height:151px; background:url(../images/layout/small_image_background.png) no-repeat; margin: 20px 10px 0px 0px;}
.small_box img {margin: 7px 0px 0px 7px;}

/*Button*/
a.button {background:url(../images/layout/button.png) no-repeat; height: 30px; width: 86px; color: white; display: block; margin: 10px 0px 0px 10px; padding: 7px 0px 0px 0px; text-align: center;cursor: pointer; display: inline-block; }
a.button:active{background:url(../images/layout/clicked_button.png) no-repeat;}

a.long {background:url(../images/layout/long_button_bg.png) no-repeat; height: 35px; width: 142px; padding-top: 9px;}
a.long:active {background:url(../images/layout/long_button_bg_hover.png) no-repeat;}

a.tiny {background:url(../images/layout/tiny_button.png) no-repeat; height: 20px; width: 57px; padding-top: 5px; margin: 0px 0px 0px 0px; font-size: 11px; line-height: 11px;}
a.tiny:active {background:url(../images/layout/tiny_button_click.png) no-repeat;}

/*Login Box*/
.login_box {width: 603px; background: url(../images/layout/login_background.png) no-repeat; position: relative; padding: 5px 5px 5px 5px; border-radius: 7px;}
.login_header{background:url(../images/layout/login_header.png) no-repeat; text-align:center; font-weight: bold; width: 593px; height: 54px;  float: left; line-height: 40px;}
.login_form {background: white; width: 593px; border-bottom-left-radius: 7px;  border-bottom-right-radius: 7px;}
.login_form th {text-align: right}
.login_form td input {padding: 3px; width: 350px;}
.login_form td span a{color:#00F}
.login_form td span a:hover{text-decoration: underline}

/*added To Cart Dialog*/
.addedToCart_box {width: 310px; background: url(../images/layout/login_background.png) no-repeat; position: relative; padding: 5px 5px 5px 5px}
.addedToCart_form {background: white; width: 300px; height: 80px; padding: 15px 0px 15px 0px; }
.addedToCart_form td {text-align: center;}
.no-close .ui-dialog-titlebar-close {display: none }

/* message box */
.msgDialog_box { width: 210px; position: relative; padding: 5px 5px 5px 5px }
.msgDialog_form {background: white; width: 200px; height: 50px; padding: 15px 0px 15px 0px; border: 2px solid #DDD}
.msgDialog_form td {text-align: center;}

/*Order Box*/
.order_form{ width: 100%;}
.order_form td{padding: 5px;}
.order_form td input {padding: 3px; width: 450px; background-color:#FFF}
.order_form td textarea {width: 100%; height: 400px;}

/*Content Box*/
.content_box_header {background:url(../images/layout/long_header_background.png) no-repeat; width: 880px; height: 40px; text-align: center;color: black; line-height: 35px; margin: 10px 0px 0px 10px; font-weight: bold; position: relative; float: left;}
.content_box {margin: 0px 0px 0px 10px; width: 860px; float:left; background: white; padding: 10px;}
.back_button {position: absolute; left: 10px; top: 7px;}

/*Event Box*/
.event_box {margin: 0px 0px 10px 10px; float:left; position: relative; background: white; padding: 10px; width: 860px;}

/*Register Form*/
.register_form {}
.register_form td input {width: 300px;}
.register_form td span { position: relative; top: -10px; margin-left: 20px; font-weight: bold; }
.register_form td input.capcha_input{width: 50px; }
.register_form td textarea {width: 100%; height: 300px;}

/* Service */
.service_content { background: url(../images/layout/service_bg.png); width: 880px; height: 596px; margin: 0 auto; margin-top: -8px; margin-bottom: 20px; text-transform: uppercase; }
.service_box { float: left; width: 408px; margin: 0 10px 25px 5px; }
.service_box:hover { cursor: pointer; }
.service_box img { margin-left: 23px; margin-top: -39px; }
.service_content div.content { padding-top: 20px; float: left; }
.service_box_header { background:url(../images/layout/service_box_header.png) no-repeat; width: 408px; height: 38px; position: relative; float: left; margin-left: 20px; margin-bottom: 25px; padding-top: 10px; text-align: center; font-weight: bold; font-size: 15px; }

/*Cart*/
.cart_table {width: 100%;}
.cart_table th {text-align: left;}
.cart_table td {border-bottom: 2px solid #CCC; padding: 7px;}
.quantity_field {width: 30px;}

/*Footer*/
.footer{position: relative; height: 81px ; width: 100%; background:url(../images/layout/footer_background.png) no-repeat center center;}

/*Common Class*/
.box-head {width: 100%; text-indent: 20px; line-height: 24px; height: 30px; font-size:16px; font-weight: bold;}
.box {width: 100%; height: 100%;}
.right{float: right;}
.left{float: left}
.secondary_background {margin: 0px; padding: 0px; outline: 0px; background:url(../images/layout/secondary_background.png) no-repeat center top;}
.no_background {background:none;}
.red {color: red;}
.clear {clear:both;}

/* paging */
.paging { clear: both; padding:10px 0px 0px 0px; text-align:center; }  
.paging.display{text-align:right;}  
.paging a, .paging span {padding:2px 8px 2px 8px;}  
.paging span {font-weight:bold; color:#fff; }  
.paging a {color:#000; text-decoration:none; }  
.paging a:hover { text-decoration:none; color:#aaa; }  
.paging span.prn { font-weight:bold; color:#000; }  
.paging a.prn { border:2px solid #dddddd;}
.paging a.prn:hover { border-color:#000;}  
.paging p#total_count{color:#aaa; padding-top:8px; padding-left:18px;}  
.paging p#total_display{color:#aaa; padding-top:10px;}

/* introduction */
#introduction-wrapper { background: url(../images/layout/introduction-bg.png) repeat-x; height: 948px; min-width: 1080px; text-transform: uppercase; color: #0a5078; font-weight: bold; text-shadow: 1px 1px 2px #6b91a6; color: #0a5078; }
#content { background: url(../images/layout/main-door.png); width: 1080px; height: 807px; margin: 0 auto; }

#flash-text { width: 500px; height: 128px; margin-left: 27px; text-align: center; float: left; }
#flash-text span { padding-top: 10px; }

#company { font-size: 21px; vertical-align: middle; text-align: center; padding-top: 50px; text-shadow: 1px 2px 1px #6b91a6; float: right; margin-right: 85px; }

#small-menu { position: relative; float: left; width: 470px; margin-left: 27px; padding-top: 25px; clear: both; }
#small-menu .menu-item { margin-bottom: 6px; }
#small-menu .menu-item div + div + div { font-size: 24px; font-weight: bold; }
#small-menu .menu-item div { padding-left: 20px; }
div.arrow { background: url(../images/layout/arrow.png) no-repeat; width: 29px; height: 15px; float: left; margin-left: 25px; margin-top: 8px; padding-left: 8px !important; }
.menu-item:hover { background: url(../images/layout/ribbon-bg.png) repeat-x; }
.menu-item:hover > div.ribbon-piece { background: url(../images/layout/ribbon.png) no-repeat; width: 19px; height: 43px; position: absolute; margin-left: -18px !important; }
.menu-item:hover > div.arrow { background: url(../images/layout/arrow-hover.png) no-repeat; width: 29px; cursor: pointer; }
.menu-item:hover > div { background: url(../images/layout/ribbon-bg.png) repeat-x; color: #fff; cursor: pointer; text-shadow: 1px 1px 2px #cc9da5; padding-left: 20px; }

#logo { background: url(../images/layout/logo.jpg) no-repeat; width: 126px; height: 128px; float: right;  margin: 0 auto; position: relative; margin-right: 232px; margin-top: 10px; margin-bottom: 10px; }

#intro-address { clear: both; float: right; width: 500px; color: #0a5078; text-align: center; position: relative; margin-right: 20px !important; margin-bottom: -100px; margin-top: 25px; }
#intro-address span { display: block; margin-bottom: 15px; font-size: 15px;}

#sliding-banner { clear: both; float: right; width: 357px; height: 374px; margin-right: 96px; margin-top: 96px; }
.bx-next { position: absolute; right: -36px; top: 200px; display: none; }
.bx-prev { position: absolute; left: -37px; top: 200px; display: none; }

#door { background: url(../images/layout/door-bg.png); width: 467px; height: 529px; float: left; clear: both; position: relative; margin-left: 93px; margin-top: -473px; }

#shadow { background: url(../images/layout/introduction-shadow.png) no-repeat; min-width: 1041px; height: 64px; position: relative; margin-left: 28px; clear: both; }

#sliding-map { bottom: 0px; position: fixed; left: 0; width: 100%; z-index: 10; }
#sliding-map-header { background: url(../images/layout/sliding-map.png) no-repeat; width: 1025px; height: 37px; cursor: pointer; ; margin: 0 auto; }
#map { background: url(../images/layout/map.jpg) no-repeat; width: 1025px; height: 480px; display: none; cursor: pointer;  margin: 0 auto; }

/* Jquery dialog */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-widget-overlay, .ui-widget-shadow { background-color: #000; opacity: .80; filter: Alpha(Opacity=80); }
.ui-dialog { position: absolute; overflow: hidden; }